<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="addHandele">添加</a-button>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <!-- <a-input-group compact>
                        <a-select default-value="2023">
                            <a-select-option value="2023">
                                2023
                            </a-select-option>
                        </a-select>
                        <a-button class="blue-btn" @click="exportHandele">导出年度党费记录</a-button>
                    </a-input-group> -->
                    <a-button class="blue-btn" @click="exportHandele">导出年度党费记录</a-button>
                </template>
            </vxe-form-item>
        </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item v-if="row.fjfzt == '待缴费'">
                        <a-button class="blue-btn" @click="showModal(row)">缴费</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fjfzt == '待确认'">
                        <a-popconfirm
                            title="您确定要确认缴费这条数据吗?"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="sureHandele(row)"
                            @cancel="cancel"
                            >
                            <a-button class="blue-btn">确认已缴费</a-button>
                        </a-popconfirm>
                    </a-form-item>
                    <a-form-item v-if="row.fjfzt == '待确认'">
                        <a-popconfirm
                            title="您确定要退回这条数据吗?"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="returnHandele(row)"
                            @cancel="cancel"
                            >
                            <a-button class="blue-btn">退回待缴费</a-button>
                        </a-popconfirm>
                    </a-form-item>
                    <a-form-item>
                        <a-button class="blue-btn" @click="editHandele(row)">编辑</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-popconfirm
                            title="您确定要删除这条数据吗?"
                            ok-text="确定"
                            cancel-text="取消"
                            @confirm="deleteHandele(row)"
                            @cancel="cancel"
                            >
                            <a-button class="red-btn">删除</a-button>
                        </a-popconfirm>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <a-modal
            title="缴费"
            :visible="jfVisible"
            :confirm-loading="confirmLoading"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="handleCancel"
            >
            <a-form :form="cform" ref="form" class="partyFeeManagement-modal-form" >
                <a-form-item label="实缴金额">
                    <a-input-number v-model="fsjje"
                        v-decorator="['fsjje', {initialValue:fsjje,rules: rules.fsjje}]"
                        :min="1"
                        style="width:100%;"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal
            title="选择导出党费记录年度"
            :visible="exportVisible"
            :confirm-loading="confirmLoading"
            :maskClosable="false"
            @ok="exportLogs"
            @cancel="handleCancel"
            >
            <a-date-picker
                :default-value="Date()"
                v-model="dfYear"
                type="year"
                mode="year"
                format="YYYY"
                placeholder="请输入年份"
                @panelChange="panelChangeOne" />
        </a-modal>
        <handleModal ref="handleModalRef" :passObj="passObj" @success="success"></handleModal>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal.vue'
import { deleteDfjl,returnPayment,confirmPayment,exportYearDfDataExcel } from './service/index.js'
import moment from 'moment'
export default {
    components: {
        commpVxeTable,handleModal
    },
    props:{},
    data() {
        return {
            moment:moment,
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.queryDfjlGlPageList,
                rowId: 'id',
                paramet:{}
            },
            formItem: [
                {
                label: '缴费人员',
                model: 'fjfry',
                },{
                label: '缴费状态',
                model: 'fjfzt',
                type:'Select',
                // defaultValue: '待确认',
                options:[{
                    label: '待缴费',
                    value: '待缴费'
                },{
                    label: '待确认',
                    value: '待确认'
                },{
                    label: '已缴费',
                    value: '已缴费'
                }]
                },{
                label: '缴费方式',
                model: 'fjffs',
                type:'Select',
                options:[{
                    label: '线上',
                    value: '线上'
                },{
                    label: '线下',
                    value: '线下'
                }]
                },
            ],
            columnsVxe: [
                {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
                },{
                title: '缴费人员',
                field: 'fjfry',
                },{
                title: '缴费状态',
                field: 'fjfzt',
                },{
                title: '应缴金额',
                field: 'fyjje',
                },{
                title: '应缴时间',
                field: 'fyjsj',
                },{
                title: '实缴金额',
                field: 'fsjje',
                },{
                title: '缴费时间',
                field: 'fjfsj',
                },{
                title: '缴费方式',
                field: 'fjffs',
                },{
                title: '操作',
                field: 'jobid',
                width: 450,
                align: 'left',
                slots: {
                // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                }
            ],
            idList: [],
            passObj: {},
            jfVisible: false,
            exportVisible: false,
            confirmLoading: false,
            cform:this.$form.createForm(this, { name: 'cform' }),
            fsjje: null,
            jfId: '',
            dfYear: moment(Date()).format('YYYY'),
            rules:{
                fsjje: [{ required: true,type: 'number', message: '请填写实缴金额', trigger: 'blur',}],
            }
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        // searchEvent(){
        //     this.dataTableConfig.paramet = {
        //         ...this.dataTableConfig.paramet,
        //     }
        //     //console.log(this.dataTableConfig.paramet)
        // },
        // // 重置
        // resetEvent(){
        //     this.dataTableConfig.paramet = {
        //         ...this.dataTableConfig.paramet,
        //     }
        // },
        // 添加
        addHandele(){
            this.$nextTick(_ => {
                this.$refs.handleModalRef.handleModalVisible = true
            })
        },
        // 编辑
        editHandele(row){
            this.passObj = {
                ...row
            }
            this.$nextTick(_ => {
                this.$refs.handleModalRef.handleModalVisible = true
            })
        },
        sureHandele(row){
            confirmPayment({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.reCommpVxeTable = Date.now()
                } else (
                    this.$message.warning(res.message)
                )
            })
        },
        returnHandele(row){
            returnPayment({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.reCommpVxeTable = Date.now()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 删除
        deleteHandele(row){
            deleteDfjl({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.reCommpVxeTable = Date.now()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        showModal(row) {
            this.jfId = ''
            this.jfId = row.id
            this.jfVisible = true;
        },
        handleOk(e) {
            this.cform.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true;
                    let data = {
                        fsjje: this.fsjje,
                        id: this.jfId
                    }
                    confirmPayment(data).then(res => {
                        if(res.code == 200){
                            this.confirmLoading = false;
                            this.$message.success(res.message)
                            this.reCommpVxeTable = Date.now()
                            this.jfVisible = false
                        } else (
                            this.$message.warning(res.message)
                        )
                    })
                }
            })
        },
        handleCancel(e) {
            this.jfVisible = false;
            this.exportVisible = false
        },
        cancel(){},
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.searchEvent()
            this.idList = []
        },
        exportHandele(){
            this.exportVisible = true
        },
        // 得到年份选择器的值
        panelChangeOne(value) {
            this.dfYear = moment(value).format('YYYY')
        },
        //导出
        exportLogs(){
            var fileName = this.dfYear + '年度党费记录'
            exportYearDfDataExcel({year:this.dfYear}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.exportVisible = false
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
.red-btn{
    color:  white !important;
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
.partyFeeManagement-modal-form{
    .ant-form-item{
        display: flex;
    }
    .ant-form-item-label{
        width: 100px;
    }
    .ant-form-item-control-wrapper{
        width: 260px;
    }
    .ant-calendar-picker{
        width: 260px;
    }
}
</style>
